<template>
    <span class="file-input-wrapper" @click="doClick" :title="title">
       <span v-if="hasDefaultSlot">
            <slot></slot>
        </span>
        <span class="file-input" v-else>
            <span v-if="fileName">{{ fileName }}</span>
            <span style="color:#999999" v-else>{{ props.placeholder }}</span>
        </span>
        <input type="file" ref="file" :multiple="props.multiple" :accept="props.accept" @change="fileChange"/>
    </span>
</template>
<script name="FileInput" setup>
import { useSlots,ref } from "vue"
const hasDefaultSlot = !!useSlots().default
const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: File,
  multiple: {
    default: false
  },
  accept: {
    default: "*"
  },
  placeholder: {
    default: '未选择任何文件'
  }
})
const fileName=ref(''),title=ref(''),file=ref(null)
function doClick(e) {
  file.value.value=""
  file.value.click(e)
}
function fileChange(e) {
  let files = e.target.files;
  if (files.length == 0) {
    this.fileName = "";
    this.title = ''
    // this.value=null;
    let value=props.multiple?[]:null
    emit('update:modelValue', value);
    emit('change', value);
    return;
  }
  if (files.length == 1) {
    fileName.value = files[0].name;
    title.value = ''
  } else {
    fileName.value = files.length + "个文件"
    let names = [];
    for (let f of files) {
      names.push(f.name);
    }
    title.value = names.join('\n')
  }
  let fileArr = [];
  for (let f of files) {
    fileArr.push(f);
  }
  // this.value=fileArr;
  const retValue=props.multiple?fileArr:fileArr[0]
  emit('update:modelValue', retValue);
  emit('change', retValue);
}
</script>
<!--<script>
export default {
  name: 'FileInput',
  emits:['change'],
  props: {
    multiple: {
      default: false
    },
    accept: {
      default: "*"
    },
    placeholder: {
      default: '未选择任何文件'
    }
  },
  data() {
    return {
      fileName: '',
      title: ''
    }
  },
  methods: {
    doClick(e) {
      this.$refs.file.value=""
      this.$refs.file.click(e)
    },
    fileChange(e) {
      let files = e.target.files;
      if (files.length == 0) {
        this.fileName = "";
        this.title = ''
        // this.value=null;
        this.$emit('update:modelValue', []);
        this.$emit('change', []);
        return;
      }
      if (files.length == 1) {
        this.fileName = files[0].name;
        this.title = ''
      } else {
        this.fileName = files.length + "个文件"
        let names = [];
        for (let f of files) {
          names.push(f.name);
        }
        this.title = names.join('\n')
      }
      let fileArr = [];
      for (let f of files) {
        fileArr.push(f);
      }
      // this.value=fileArr;
      this.$emit('update:modelValue', fileArr);
      this.$emit('change', fileArr);
    }
  }
}
</script>
-->
<style>
.file-input {
  min-width: 1px;
  position: relative;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  display: inline-block;
  padding: 4px 10px;
  line-height: 1.5;
  font-size: 14px;
  transition: all linear .2s;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-family: inherit;
  vertical-align: top;
  outline: none;
  width: 100%;
  height: 40px;
}

.file-input-wrapper input[type=file] {
  display: none;
}

.file-input span {
  height: 30px;
  line-height: 30px;;
}
</style>
